<template>
  <div class="lyric">
    <ul :style="{transform: `translateY(${-5 * lyricIdx}vh)`}">
      <li
        v-for="(item, index) in lyric"
        :key="index"
        :class="index == lyricIdx && 'lyric-li'"
      >{{item.content}}</li>
    </ul>
  </div>
</template>
<style lang="scss">
.lyric {
  height: 15vh;
  color: white;
  overflow: hidden;

  ul {
    li {
      margin: 0 auto;
      height: 5vh;
      width: 80vw;
      text-align: center;
      white-space: nowrap;
      /*2.超出文本隐藏*/
      overflow: hidden;
      /*3.超出文本省略号表示*/
      text-overflow: ellipsis;
    }
    font-size: 12px;
    line-height: 5vh;
    .lyric-li {
      transform: scale(1.2);
      color: skyblue;
      font-weight: bold;
    }
  }
}
</style>
<script>
export default {
  props: {
    lyricIdx: {
      type: [Number],
      default: 0
    }
  },
  computed: {
    lyric() {
      // 获取歌词
      if (this.$store.state.lyric == null) {
        return "";
      } else {
        // return this.$store.state.datas[this.$store.state.index].lyric;
        return this.$store.state.lyric;
      }
    }
  }
};
</script>